<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/page" prefix="page" %>

<!DOCTYPE html>

<html class="no-js" lang="en" >

<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Shopen - A Business Template</title>

	<!-- Stylesheet
	================================================== -->
	<link rel="stylesheet" href="style.css">

	<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!-- Favicons
	================================================== -->
	<link rel="shortcut icon" href="images/favicon.ico">
	<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
	<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">

	<script src="js/vendor/custom.modernizr.js"></script>
    
</head>
<body>
	<jsp:include page ="header.jsp"/>
		<div class="large-8 columns">

			<div class="row">
				<div class="large-12 columns">

            		<div class="content">

                    	<div class="singletop">
                            <div class="search">
                                <form method="get" action="#">
									<input id="s" type="text" value="Search" name="s">
                                </form>	
                            </div>
                            <nav class="breadcrumbs">
                              <a href="#">Home</a>
                              <a class="current" href="#">Blog Page</a>
                            </nav>
                        </div>
                           
                        <article class="blog-wrapper clearing-container">
                            <div class="homeposttitle">
                                <h3 class="widget-title">
                                    <span>
                                    <i class="fa fa-pencil homeposticon"></i>
                                    <a href="single.html">Standard Blog Post Type</a>
                                    </span>
                                </h3>  
                                    <ul class="post-date clearfix">
                                        <li><i class="fa fa-calendar"></i> <a href="#">Oct 13, 2013</a></li>
                                        <li><i class="fa fa-user"></i> <a href="#">admin</a></li>
                                        <li><i class="fa fa-comment-o"></i> <a href="#">12 Comments</a></li>
                                    </ul>
                            </div>
                           
                            <div class="entry post-thumb large-4 columns">
                                <a href="#"><img src="img/01_slider.png" alt=""><span class="magnifier"></span></a>
                            </div>
                            
                            <div class="large-8 columns post-content">
                            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here...</p>
                            <a href="single.html">read more →</a>
                            </div>
						</article>
                        
                        <article class="blog-wrapper clearing-container">
                            <div class="homeposttitle">
                            <h3>
                             <span>
                                <i class="fa fa-film homeposticon"></i>
                                <a href="single.html">An Example Video Post Type.</a>
                             </span>
                            </h3>
                                <ul class="post-date clearfix">
                                    <li><i class="fa fa-calendar"></i> <a href="#">Oct 12, 2013</a></li>
                                    <li><i class="fa fa-user"></i> <a href="#">admin</a></li>
                                    <li><i class="fa fa-comment-o"></i> <a href="#">4 Comments</a></li>
                                </ul>
                            </div>
                            
                            <div class="entry post-thumb large-4 columns">
                                <div class="flex-video widescreen vimeo">
                                  <iframe src="http://player.vimeo.com/video/21762736" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
                                </div>
                            </div>
                            
                            <div class="large-8 columns post-content">
                            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here...</p>
                            <a href="single.html">read more →</a>
                            </div>
						</article>
                        
                        <article class="blog-wrapper quotepost clearing-container">
                            <div class="homeposttitle">
                            <h3>
                             <span>
                                <i class="fa fa-quote-left homeposticon"></i>
                                <a href="single.html">What is a highway to one is a disaster to the other.</a>
                             </span>
                            </h3>
                            </div>
                            
							<p class="quotepost-title">Mevlana Rumi (1207 - 1273)</p>

						</article>
                        
                        <article class="blog-wrapper clearing-container">
                            <div class="homeposttitle">
                            <h3>
                             <span>
                                <i class="fa fa-picture-o homeposticon"></i>
                                <a href="single.html">Custom slider post type</a>
                             </span>
                            </h3>
                                <ul class="post-date clearfix">
                                    <li><i class="fa fa-calendar"></i> <a href="#">Oct 7, 2013</a></li>
                                    <li><i class="fa fa-user"></i> <a href="#">admin</a></li>
                                    <li><i class="fa fa-comment-o"></i> <a href="#">3 Comments</a></li>
                                </ul>
                            </div>
                            
                            <div class="entry post-thumb large-4 columns">
                                <div class="slider">
                                    <div class="post-slider">
                                        <ul class="slides">
                                        <li>
                                            <a href="#"><img src="img/01_portfolio.jpg" alt="" /></a>
                                        </li>
                                        <li>
                                            <a href="#"><img src="img/02_portfolio.jpg" alt="" /></a>
                                        </li>
                                        <li>
                                            <a href="#"><img src="img/03_portfolio.jpg" alt="" /></a>
                                        </li>
                                        </ul>
                                    </div>
                                </div><!-- End Slider Widget -->
							</div>
                            
                            <div class="large-8 columns post-content">
                            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here...</p>
                            <a href="single.html">read more →</a>
                            </div>
						</article>
                        
                        <article class="blog-wrapper clearing-container">
                            <div class="homeposttitle">
                            <h3>
                             <span>
                                <i class="fa fa-pencil homeposticon"></i>
                                <a href="single.html">Illustration of chalkboard with chalk.</a>
                            </span>
                            </h3>
                                <ul class="post-date clearfix">
                                    <li><i class="fa fa-calendar"></i> <a href="#">Oct 13, 2013</a></li>
                                    <li><i class="fa fa-user"></i> <a href="#">admin</a></li>
                                    <li><i class="fa fa-comment-o"></i> <a href="#">12 Comments</a></li>
                                </ul>
                            </div>
                            
                            <div class="entry post-thumb large-4 columns">
                                <a href="#"><img src="img/01_slider.png" alt=""><span class="magnifier"></span></a>
                            </div>
                            
                            <div class="large-8 columns post-content">
                            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here...</p>
                            <a href="single.html">read more →</a>
                            </div>
						</article>
                        
                        <ul class="pagination clearing-container">
                          <li class="arrow unavailable"><a href="#">&laquo;</a></li>
                          <li class="current"><a href="#">1</a></li>
                          <li><a href="#">2</a></li>
                          <li><a href="#">3</a></li>
                          <li><a href="#">4</a></li>
                          <li class="arrow"><a href="#">&raquo;</a></li>
                        </ul>
                        
                    </div><!-- content -->
               
				</div><!-- large 12 -->
			</div><!-- end row -->
            
		</div><!-- end large 8 -->
	</div><!-- end wrapper -->

<jsp:include page="footer.jsp"/>
    

	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script src="js/jquery.flexslider.js"></script>
    <script src="js/tinynav.min.js"></script>
	<script src="js/menu_min.js"></script>
	<script src="js/foundation.min.js"></script>
	<script src="js/jquery.prettyPhoto.js"></script>
	<script src="js/script.js"></script>
   
 
</body>
</html>
